<template>
  <div>
    <!--<div>-->
      <!--<div v-for="site in siteList" :key="site._id">-->
        <!--<span>{{ site.site }}</span>-->
        <!--<el-divider content-position="left">{{ site.describe }}</el-divider>-->
      <!--</div>-->

    <!--</div>-->

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="site"
        label="地址"
        width="250">
        <template slot-scope="scope">
          <a :href='scope.row.site'>{{scope.row.site}}</a>
        </template>

      </el-table-column>
      <el-table-column
        prop="describe"
        label="简介">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="tag"-->
        <!--label="标签"-->
        <!--width="100"-->
        <!--:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"-->
        <!--:filter-method="filterTag"-->
        <!--filter-placement="bottom-end">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag-->
            <!--:type="scope.row.tag === '家' ? 'primary' : 'success'"-->
            <!--close-transition>{{scope.row.tag}}</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="站点">
        <el-input v-model="form.site"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.describe"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import Vue from 'vue';
  import {Form,FormItem,Input,Button,Divider,Table,TableColumn} from 'element-ui'

  import {postSiteItem} from '../api/siteCollect'
  import {getAllSite} from '../api/siteCollect'


  Vue.use(Form)
  Vue.use(FormItem);
  Vue.use(Input);
  Vue.use(Button)
  Vue.use(Divider);
  Vue.use(Table,TableColumn)
  Vue.use(TableColumn)


  export default {
    data() {
      return {
        form: {
          site: '',
          describe:'',
        },
        siteList:[],
        tableData:[]

      }
    },
    async created(){
      getAllSite().then((response) => {
        console.log(response.data)
        this.siteList = this.tableData = response.data
      })
    },
    methods: {
      onSubmit() {
        postSiteItem({site:this.form.site,describe:this.form.describe}).then(()=>{
          getAllSite().then((response) => {
            console.log(response.data)
            this.siteList  =this.tableData= response.data
          })
        })
        console.log('submit!');
      }
    }
  }
</script>
<style scoped>

</style>
